<template>
  <a-card :bordered="false" class="withdrawal">
    <div class="theknightSearch table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="getList">
        <a-row :gutter="24">
          <a-col :md="5" :sm="5">
            <a-form-item label="服务名称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入服务名称" v-model="queryParam.officialName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="5">
            <a-form-item label="服务类型" labelAlign="right" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <j-dict-select-tag type="list" v-model="queryParam.category" dictCode="category" placeholder="全部" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-button type="primary" @click="getList" icon="search">搜索</a-button>
            <a-button style="margin-left: 8px" @click="getList">刷新</a-button>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-button type="primary" style="margin-left: 8px;margin-top:10px" @click="release">发布</a-button>
        </a-row>
      </a-form>
    </div>
    <section class="table">
      <a-table ref="table" size="middle" bordered rowKey="objectSid" :columns="columns" :pagination="ipagination"
        @change="changePage" :dataSource="List" :loading="loading">
        <span slot="action" slot-scope="record">
          <a @click="details(record)">查看详情</a>
          <a-divider type="vertical" />
          <a @click="editor(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="deleteService(record)">删除</a>
          <a-divider v-if="record.status!=3" type="vertical" />
          <a v-if="record.status!=3&&record.status==2" @click="shelves(record)">上架</a>
          <a v-if="record.status!=3&&record.status==1" @click="shelves(record)">下架</a>
        </span>
      </a-table>
    </section>
    <a-modal v-model="showRelease" title="发布" @ok="addThis" width="60%" :confirm-loading="confirmLoading">
      <a-form-model :labelCol="{span: 3}" :wrapperCol="{span: 14, offset: 1}" ref="addForm" :model="chooseOrder"
        :rules="addRules">
        <a-form-model-item label="服务名称" :required="true">
          <a-input v-model="chooseOrder.officialName" placeholder="请输入服务名称" />
        </a-form-model-item>
        <a-form-model-item label="服务分类" :required="true">
          <j-dict-select-tag type="list" v-model="chooseOrder.category" dictCode="category" placeholder="请选择服务分类" />
        </a-form-model-item>
        <a-form-model-item label="服务图片" :required="true">
          <j-image-upload biz-path="adHot/serveImg" v-model="chooseOrder.imgUrl" placeholder="请上传服务图片"></j-image-upload>
        </a-form-model-item>
        <a-form-model-item label="描述" :required="true">
          <a-input v-model="chooseOrder.description" placeholder="请输入服务描述" />
        </a-form-model-item>
        <a-form-model-item label="价格" :required="true">
          <a-input-number v-model="chooseOrder.price" placeholder="请输入服务价格" />
          <label style="margin-left:5px;">元</label>
        </a-form-model-item>
        <a-form-model-item label="状态" :required="true">
          <a-select placeholder="请选择状态" style="width: 120px" v-model="chooseOrder.status">
            <a-select-option value="1" key="1">
              上架中
            </a-select-option>
            <a-select-option value="2" key="2">
              未上架
            </a-select-option>
            <a-select-option value="3" key="3">
              禁止上架
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="推荐" :required="true">
          <a-select placeholder="请选择推荐状态" style="width: 120px" v-model="chooseOrder.isHot">
            <a-select-option value="0" key="0">
              不推荐
            </a-select-option>
            <a-select-option value="1" key="1">
              推荐
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal v-model="showDetails" title="服务详情" width="60%" @ok="showDetails=false">
      <a-form-model :labelCol="{span: 3}" :wrapperCol="{span: 14, offset: 1}" ref="addForm" :model="chooseOrder"
        :rules="addRules">
        <a-form-model-item label="服务名称">
          <label>{{chooseOrder.officialName}}</label>
        </a-form-model-item>
        <a-form-model-item label="服务编号">
          <label>{{chooseOrder.officialNo}}</label>
        </a-form-model-item>
        <a-form-model-item label="服务分类">
          <label>{{chooseOrder.category_dictText}}</label>
        </a-form-model-item>
        <a-form-model-item label="服务图片">
          <img style="width:100px;margin-left:5px;" :src="chooseOrder.imgUrl" alt="">
        </a-form-model-item>
        <a-form-model-item label="服务描述">
          <label>{{chooseOrder.description}}</label>
        </a-form-model-item>
        <a-form-model-item label="服务价格">
          <label>{{chooseOrder.price}}元</label>
        </a-form-model-item>
        <a-form-model-item label="状态">
          <label v-if="chooseOrder.status==1">上架中</label>
          <label v-if="chooseOrder.status==2">未上架</label>
          <label v-if="chooseOrder.status==3">禁止上架</label>
        </a-form-model-item>
        <a-form-model-item label="推荐">
          <label v-if="chooseOrder.isHot==0">不推荐</label>
          <label v-if="chooseOrder.isHot==1">推荐</label>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal v-model="showEditor" title="编辑" width="60%" @ok="OkshowEditor">
      <a-form-model :labelCol="{span: 3}" :wrapperCol="{span: 14, offset: 1}" ref="addForm" :model="chooseOrder"
        :rules="addRules">
        <a-form-model-item label="服务名称" :required="true">
          <a-input v-model="chooseOrder.officialName" placeholder="请输入服务名称" />
        </a-form-model-item>
        <a-form-model-item label="服务分类" :required="true">
          <j-dict-select-tag type="list" v-model="chooseOrder.category" dictCode="category" placeholder="请选择服务分类" />
        </a-form-model-item>
        <a-form-model-item label="服务图片" :required="true">
          <j-image-upload biz-path="adHot/serveImg" v-model="chooseOrder.imgUrl" placeholder="请上传服务图片"></j-image-upload>
        </a-form-model-item>
        <a-form-model-item label="描述" :required="true">
          <a-input v-model="chooseOrder.description" placeholder="请输入服务描述" />
        </a-form-model-item>
        <a-form-model-item label="价格" :required="true">
          <a-input-number v-model="chooseOrder.price" placeholder="请输入服务价格" />
          <label style="margin-left:5px;">元</label>
        </a-form-model-item>
        <a-form-model-item label="状态" :required="true">
          <a-select placeholder="请选择状态" style="width: 120px" v-model="chooseOrder.status">
            <a-select-option value="1" key="1">
              上架中
            </a-select-option>
            <a-select-option value="2" key="2">
              未上架
            </a-select-option>
            <a-select-option value="3" key="3">
              禁止上架
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="推荐" :required="true">
          <a-select placeholder="请选择推荐状态" style="width: 120px" v-model="chooseOrder.isHot">
            <a-select-option value="0" key="0">
              不推荐
            </a-select-option>
            <a-select-option value="1" key="1">
              推荐
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal v-model="showDelete" title="删除服务" :confirm-loading="delLoading" @ok="OkdeleteService">
      <p>确定删除该服务吗？</p>
    </a-modal>
  </a-card>
</template>
<script>
  import {
    postAction,
    getAction,
    deleteAction
  } from '@/api/manage'
  import store from '@/store'
  export default {
    data() {
      return {
        loading: false,
        showDetails: false,
        showEditor: false,
        showDelete: false,
        showRelease: false,
        delLoading: false,
        confirmLoading: false,
        queryParam: {
          category: undefined,
          officialName: undefined,
          pageNo: 1,
          pageSize: 10,
        },
        List: [{
          objectSid: '123456',
          created: '2022-7-8 12:22',
          price: '123',
          category: '商家'
        }],
        chooseOrder: {
          imageUrl: ''
        }, // 选中的数据
        isBranchFlag: false, // 当前登录用户是否分站用户
        addRules: {
          officialName: [{
            required: true,
            message: '请输入服务名称!',
            trigger: ['change', 'blur']
          }],
          category: [{
            required: true,
            message: '请选择服务分类!',
            trigger: ['change', 'blur']
          }],
          imgUrl: [{
            required: true,
            message: '请上传服务图片!',
            trigger: ['change', 'blur']
          }],
          price: [{
            required: true,
            message: '请输入服务价格!',
            trigger: ['change', 'blur']
          }],
          status: [{
            required: true,
            message: '请选择服务状态!',
            trigger: ['change', 'blur']
          }],
          isHot: [{
            required: true,
            message: '请选择推荐状态!',
            trigger: ['change', 'blur']
          }],
        },
        columns: [{
            title: '名称',
            align: "center",
            dataIndex: 'officialName',
          },
          {
            title: '价格',
            align: "center",
            dataIndex: 'price',
          },
          {
            title: '分类',
            align: "center",
            dataIndex: 'category_dictText',
          },
          {
            title: '状态',
            align: "center",
            dataIndex: 'status',
            customRender: (value, row, index) => {
              let obj;
              if (value == 1) {
                obj = '上架中'
              } else if (value == 2) {
                obj = '未上架'
              } else if (value == 3) {
                obj = '禁止上架'
              }
              return obj;
            }
          },
          {
            title: '是否推荐',
            align: "center",
            dataIndex: 'isHot',
            customRender: (value, row, index) => {
              let obj;
              if (value == 0) {
                obj = '不推荐'
              } else if (value == 1) {
                obj = '推荐'
              }
              return obj;
            }
          },
          {
            title: '创建时间',
            align: "center",
            dataIndex: 'created',
          }, {
            title: '操作',
            dataIndex: '',
            key: 'x',
            scopedSlots: {
              customRender: 'action'
            }
          },
        ],
        //标记页数；页码
        ipagination: {
          current: 1,
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          total: 0
        },
        url: {
          list: "/officialBase/listPage",
          del: "/officialBase/deleteById",
          add: "/officialBase/add",
          edit: "/officialBase/update"
        }
      }
    },
    computed: {
      userInfro () {
        return this.$store.getters.userInfo
      }
    },
    created() {
      this.getList()
    },
    methods: {
      // 发布
      release() {
        this.chooseOrder = {
          officialName: '',
          category: undefined,
          imgUrl: '',
          description: "",
          price: '',
          status: undefined,
          isHot: undefined,
          branchId:this.userInfro.id
        };
        console.log(this.chooseOrder);
        this.showRelease = true
      },
      // 新增服务
      addThis() {
        this.$refs.addForm.validate(valid => {
          if (valid) {
            this.confirmLoading = true;
            postAction(this.url.add, this.chooseOrder).then(res => {
              console.log(res);
              this.confirmLoading = false;
              if (res.success) {
                this.$message.success(res.message);
                this.showRelease = false;
                this.getList()
              }
            })
          }
        })
      },
      // 查看详情
      details(e) {
        this.chooseOrder = e
        this.showDetails = true
      },
      // 编辑
      editor(e) {
        let str = JSON.stringify(e);
        this.chooseOrder = JSON.parse(str);
        this.chooseOrder.status = this.chooseOrder.status.toString();
        this.chooseOrder.isHot = this.chooseOrder.isHot.toString();
        console.log(this.chooseOrder);
        this.showEditor = true
      },
      // 确认修改
      OkshowEditor() {
        this.$refs.addForm.validate(valid => {
          if (valid) {
            this.confirmLoading = true;
            postAction(this.url.edit, this.chooseOrder).then(res => {
              console.log(res);
              this.confirmLoading = false;
              if (res.success) {
                this.$message.success(res.message);
                this.showEditor = false;
                this.getList()
              }
            })
          }
        })
      },
      // 删除
      deleteService(e) {
        this.chooseOrder = e;
        this.showDelete = true;
      },
      OkdeleteService() {
        this.delLoading = true;
        deleteAction(this.url.del, {
          id: this.chooseOrder.objectSid
        }).then(res => {
          console.log(res);
          this.delLoading = false;
          if (res.success) {
            this.$message.success('删除成功');
            this.showDelete = false;
            this.getList()
          }else{
            this.$message.success(res.message);
          }
        })
      },
      // 上下架
      shelves(e) {
        if(e.status==1){
          e.status = 2;
        }else if(e.status==2){
          e.status = 1;
        }
        postAction(this.url.edit, e).then(res => {
          console.log(res);
          this.confirmLoading = false;
          if (res.success) {
            this.$message.success(res.message);
            this.showEditor = false;
            this.getList()
          }
        })
      },
      getList() {
        this.loading = true;
        getAction(this.url.list, this.queryParam).then((res) => {
          console.log(res);
          this.loading = false;
          if (res.success) {
            this.List = res.result.records;
            this.ipagination.total = res.result.total;
          }
        })
      },
      onClose() {},
      // 代理列表改变分页
      changePage(pagination) {
        console.log(pagination);
        this.ipagination.current = pagination.current
        this.queryParam.pageNo = pagination.current;
        this.queryParam.pageSize = pagination.pageSize;
        this.getList();
      },
    }
  }
</script>
<style lang="less" scoped>
  .modal {
    .modeal-title {
      text-align: center;
      font-size: 20px;
      font-weight: 700;
    }

    button {
      position: absolute;
      right: 50px;
    }

    .pooltable {
      padding-top: 50px;
    }
  }

  .withdrawal {
    .time {
      margin-top: 30px;
    }

    .theknightSearch {
      padding: 15px 10px;

      .ant-form-item {
        width: 100%;
      }
    }

    .table-page-search-wrapper .ant-form-inline .ant-form-item {
      margin-bottom: 0px !important;
    }
  }
</style>